{% extends "account/base.html" %}

{% load i18n %}

{% block head_title %}{% trans "E-mail Addresses" %}{% endblock %}

{% block content %}
  <h1 class="text-2xl font-bold mb-4">{% trans "E-mail Addresses" %}</h1>
{% if user.emailaddress_set.all %}
<p class="mb-4">{% trans 'The following e-mail addresses are associated with your account:' %}</p>

<form action="{% url 'account_email' %}" class="email_list" method="post">
{% csrf_token %}
<fieldset class="blockLabels">

  {% for emailaddress in user.emailaddress_set.all %}
<div class="ctrlHolder mb-4"></div>
    <label for="email_radio_{{forloop.counter}}" class="{% if emailaddress.primary %}primary_email{%endif%} flex items-center space-x-2">

    <input id="email_radio_{{forloop.counter}}" type="radio" name="email" {% if emailaddress.primary or user.emailaddress_set.count == 1 %}checked="checked"{%endif %} value="{{emailaddress.email}}" class="mr-2"/>

{{ emailaddress.email }}
  {% if emailaddress.verified %}
  <span class="verified text-green-500 ml-2">{% trans "Verified" %}</span>
  {% else %}
  <span class="unverified text-red-500 ml-2">{% trans "Unverified" %}</span>
  {% endif %}
    {% if emailaddress.primary %}<span class="primary text-blue-500 ml-2">{% trans "Primary" %}</span>{% endif %}
</label>
</div>
  {% endfor %}

<div class="buttonHolder flex space-x-2">
    <button class="secondaryAction bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded" type="submit" name="action_primary" >{% trans 'Make Primary' %}</button>
    <button class="secondaryAction bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded" type="submit" name="action_send" >{% trans 'Re-send Verification' %}</button>
    <button class="primaryAction bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-4 rounded" type="submit" name="action_remove" >{% trans 'Remove' %}</button>
</div>

</fieldset>
</form>

{% else %}
<p class="text-red-500"><strong>{% trans 'Warning:'%}</strong> {% trans "You currently do not have any e-mail address set up. You should really add an e-mail address so you can receive notifications, reset your password, etc." %}</p>

{% endif %}

  {% if can_add_email %}
  <h2 class="text-xl font-bold mt-6 mb-4">{% trans "Add E-mail Address" %}</h2>

  <form method="post" action="{% url 'account_email' %}" class="add_email">
    {% csrf_token %}
    {{ form.as_p }}
    <button name="action_add" type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded">{% trans "Add E-mail" %}</button>
  </form>
  {% endif %}

{% endblock %}


{% block extra_body %}
<script type="text/javascript">
(function() {
  var message = "{% trans 'Do you really want to remove the selected e-mail address?' %}";
  var actions = document.getElementsByName('action_remove');
  if (actions.length) {
  actions[0].addEventListener("click", function(e) {
    if (! confirm(message)) {
    e.preventDefault();
    }
  });
  }
})();
</script>
{% endblock %}
